<template>
  <div class="login">
    <div class="loginarea">
      <div class="loginrow">
        <input class="logininput" placeholder="用户名" type="text" v-model="user.username"></input>
      </div>
      <div class="loginrow">
        <input class="logininput" placeholder="密码" type="password" v-model="user.password" @keydown.enter="submitForm()"></input>
      </div>
      <div class="loginrow">
        <button class="loginbtn" type="input" @click="submitForm()">登录</button>
      </div>
    </div>
  </div>
</template>


<script>
import {login} from '@/network/login'

export default {
  data() {
    return {
      people: 0,
      user: {
        username: '',
        password: ''
      }
    }
  },
  created() {
  },
  methods: {
    submitForm() {
      // this.user.username = "admin"
      // this.user.password = "123456"
      if (this.user.username === '') {
        this.$message.error("用户名不能为空");
      } else if (this.user.password === '') {
        this.$message.error("密码不能为空");
      } else if (this.user.password.length > 16 || this.user.password.length < 6) {
        this.$message.error("密码长度在6-16位");
      } else {
        login(this.user.username, this.user.password)
          .then(res => {
            if (res.status === 200) {
              window.localStorage.setItem("Authorization", res.data.Authorization);
              window.localStorage.setItem("userId", res.data.id);
              this.$router.push('/experiment');
            }
          })
      }
    }
  }
}

</script>

<style scoped>
.login {
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*min-width: 1000px;*/
  zoom: 1;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-image: url('../assets/login_bkg.png');
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
}

.loginarea {
  width: 400px;
  height: 200px;
  text-align: center;
  position: absolute;
  z-index: 200;
  left: 50%;
  top: 55%;
  margin-left: -200px;
}

.loginrow {
  padding-top: 12px;
}

.logininput {
  padding-left: 15px;
  width: 240px;
  height: 40px;
  font-size: 18px;
  color: rgb(22, 51, 81);
  background-color: transparent;
  border: 1px solid rgb(22, 51, 81);;
  border-radius: 20px;
  outline: none;
}

.loginbtn {
  color: #000;
  width: 240px;
  height: 40px;
  font-size: 18px;
  outline: none;
  background-color: #b0cad9;
  border: 1px solid rgb(22, 51, 81);;
  border-radius: 20px;
}

.loginpeople {
  font-size: 15px;
  color: #fff;
}

@keyframes myMove {
  0% {
    top: 0;
  }
  50% {
    top: 4vh;
  }
  100% {
    top: 0;
  }
}
</style>
